<template >
  <div class="container">
    <div class="article van-hairline--bottom" v-if="loaded">
      <van-cell
        :title="article.title"
        size="large"
        :label="articleLabel"
        :border="false"
        class="article-title__cell"
      />

      <!-- 内容详情 -->
      <div class="framerich" v-html="formatRich" v-lazy-container></div>
      <!-- 点赞、不喜欢、打赏 -->
      <div class="flexbox article-actions">
        <div class="flexbox-item" v-if="!article.allowComment">
          <van-button @click="onLike" round class="btn-like">
            <van-icon :name="likeClassName" />
            <span>{{likeText}}</span>
          </van-button>
        </div>
        <div class="flexbox-item">
          <van-button round @click="onShield">
            <van-icon name="delete" />
            <span>不喜欢</span>
          </van-button>
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <!-- 推荐文章 -->
    <article-list
      tpl="default"
      :router="relevantApi.url"
      :params="relevantApi.params"
      v-if="loaded"
      class="mt10"
    />
  </div>
</template>
<script>
import { Tag, Col, Icon, Cell, CellGroup, Button, List, Toast } from 'vant'
import ArticleList from '../../components/article/article-list'

export default {
  components: {
    ArticleList,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [List.name]: List,
    [Toast.name]: Toast
  },
  data () {
    return {
      time: 0,
      cacheDuration: 30000,
      article: {
        liked: false
      },
      stats: {
        likes: 0
      },
      //
      loaded: false,
      visible: false,
      formats: [
        'tsline-text',
        'tsline-thumb',
        'tsline-banner',
        'tsline-gralley'
      ]
    }
  },
  created () {
    console.log('______________created_________________')
  },
  mounted () {
    console.log('______________mounted_________________')
    let currentTime = new Date().getTime()
    this.onLoad(this.id, currentTime)
  },
  computed: {
    id () {
      return this.$route.params.id
    },
    likeClassName () {
      return this.article.liked ? 'like' : 'like-o'
    },
    articleLabel () {
      let tags = []
      if (this.article) {
        tags.push(this.article.publishTime)
      }
      if (this.article.category) {
        tags.push(this.article.category.name)
      }
      if (this.stats) {
        tags.push('浏览 ' + this.stats.views)
      }
      return tags.join(' ')
    },
    likeText () {
      if (!this.stats) {
        return '赞'
      }
      return this.stats.likes ? this.stats.likes : '赞'
    },
    formatRich () {
      let content = this.article.body
      if (content) {
        return content.replace(/(<img[\s\S]+?)src=/gi, '$1data-src=')
      }
      return ''
    },
    relevantApi () {
      return {
        url: 'cms/relevant',
        params: {
          id: this.id
        }
      }
    }
  },
  methods: {
    onLoad (id, currentTime) {
      let cacheArticle = this.$store.state.article.filter(function (
        item,
        index,
        self
      ) {
        if (item.id !== id) {
          return false
        }
        if (item.expired_at < currentTime) {
          self.splice(index, 1)
          return false
        }
        return true
      })

      if (cacheArticle[0]) {
        this.article = cacheArticle[0]
        this.loaded = true
      } else {
        this.axios
          .get('/cms/article/' + id)
          .then(response => {
            this.article = response.data
            if (this.article.stats) {
              this.stats = this.article.stats
            }
            this.time = currentTime
            this.article.expired_at = currentTime + this.cacheDuration
            this.$store.state.article.push(this.article)
            this.loaded = true
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    onLike () {
      this.axios
        .post(
          '/cms/extend/like',
          { article_id: this.id },
          {
            headers: { FastMode: true }
          }
        )
        .then(response => {
          this.article.liked = response.data
          if (this.article.liked) {
            this.stats.likes = Number(this.stats.likes) + 1
          } else {
            this.stats.likes = Number(this.stats.likes) - 1
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onShield () {
      this.axios
        .post(
          '/cms/extend/shield',
          { article_id: this.id },
          {
            headers: { FastMode: true }
          }
        )
        .then(response => {
          Toast({
            message: '将为您减少此类资讯的推荐',
            position: 'bottom',
            className: 'toast-small'
          })
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.framerich {
  min-height: 100%;
  padding: 0 15px;
}
</style>
